<template>
  <div class="body">
    <p class="title">动态列表</p>
    <div class="fl">
      <div class="type">
        <div>
          <span>分类：</span>
          <span class="tag" @click="all">{{ typeall }}</span>
          <span
            v-for="item in listdata"
            :key="item.labId"
            class="tag"
            @click="tag(item.labId)"
          >
            {{ item.labName }}</span
          >
        </div>

        <div>
          <span>状态：</span>
          <span
            v-for="item in twoli"
            :key="item.id"
            class="tag"
            @click="chosestate(item.ename)"
            >{{ item.name }}</span
          >
        </div>
        <div class="sometime">
          <span>时间：</span>
          <span
            v-for="item in day"
            :key="item.id"
            class="tag"
            @click="chosetime(item.ename)"
            >{{ item.name }}</span
          >
          <div class="block2">
            <span class="demonstration" @click="show()"
              >自定义时间&nbsp;&nbsp;&nbsp;&nbsp;</span
            >
            <el-date-picker
              v-if="isshow == true"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="el-icon-search"></div>
        <input class="seainput" type="text" placeholder="搜索用户/动态标题" />
      </div>
    </div>
    <div class="container">
      <template v-for="item in list">
        <div class="box" :key="item.dyId" @click="todeal(item.dyId)">
          <div class="img">
            <!-- <img :src="item.dyContent" alt="" /> -->
            <div class="demo-image__error">
              <div class="block">
                <el-image :src="item.dyContent" class="img"></el-image>
              </div>
            </div>
          </div>
          <p class="dyText">{{ item.dyText }}</p>
          <p>
            <img
              :src="item.userinfoData.headportrait"
              alt=""
              srcset=""
              class="headportrait"
            />

            <span>{{ item.userinfoData.nickname }}</span>
            <span class="likes">
              <img src="../../assets/img/like.png" alt="" class="likeico" />

              <span>{{ item.likes }}</span>
            </span>
          </p>
        </div>
      </template>
    </div>
    <Page
      :total="total"
      :pageNumber.sync="pageNumber"
      :pageSize.sync="pageSize"
      @current-change="changeCurrentPage"
      @size-change="handleSizeChange"
    >
    </Page>
  </div>
</template>

<script>
import apis from "../../apis/modules/dynamic";
import Page from "../../components/page.vue";
export default {
  components: {
    Page,
  },
  data() {
    return {
      // 分页
      // PageNumber: 1,
      // PageSize: 10,
      total: null,
      isshow: false,
      value1: "",
      typeall: "全部",
      dyType: "all",
      state: "all",
      days: "all",
      pageNumber: 1,
      pageSize: 10,
      listdata: [], //标签
      twoli: [
        { id: "all", name: "全部", ename: "all" },
        { id: "1", name: "上架", ename: "1" },
        { id: "2", name: "下架", ename: "2" },
      ],
      day: [
        { id: "all", name: "全部", ename: "all" },
        { id: "3-2", name: "1天内", ename: "1天" },
        { id: "3-3", name: "3天内", ename: "3天" },
        { id: "3-4", name: "1周内", ename: "7天" },
        { id: "3-5", name: "1个月内", ename: "30天" },
      ],
      currentPage: 5,

      list: [], //列表
    };
  },
  beforeMount() {},
  mounted() {
    localStorage.setItem("dyType", "all");
    localStorage.setItem("state", "all");
    localStorage.setItem("days", "all");
    this.getAll({
      dyType: this.dyType,
      state: this.state,
      days: this.days,
      pageNumber: this.pageNumber,
      pageSize: this.pageSize,
    });
    this.gettag();
  },
  watch: {
    value1() {
      const d = new Date(this.value1[0]).getTime();
      const c = new Date(this.value1[1]).getTime();
      const a = c - d;
      const timeDistance = `${a / 86400000}天`;

      this.days = timeDistance;
      localStorage.setItem("days", timeDistance);
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
    },
  },
  methods: {
    //改变当前页数
    changeCurrentPage(val) {
      this.pageNumber = val;
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
      console.log(val, 333);
    },
    //改变每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(this.pageSize);
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
      console.log(val, 222);
    },
    //跳转到详情
    todeal(data) {
      // this.$router.push("/home/vodiodeal");
        this.$router.push(
              { name: 'vodiodeal',
               params: { dyId: data }
               })
    },
    all() {
      this.dyType = "all";
      localStorage.setItem("dyType", "all");
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
    },
    tag(data) {
      this.dyType = data;
      localStorage.setItem("dyType", data);
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
    },
    //选择状态
    chosestate(data) {
      this.state = data;
      localStorage.setItem("state", data);
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
    },
    //选择时间
    chosetime(data) {
      this.days = data;
      localStorage.setItem("days", data);
      const list = {
        dyType: localStorage.getItem("dyType"),
        state: localStorage.getItem("state"),
        days: localStorage.getItem("days"),
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      };
      this.getAll(list);
    },
    //自定义时间
    show() {
      this.isshow = !this.isshow;
    },

    //所有动态
    async getAll(data) {
      const res = await apis.getlisttag(data).then((res) => {
        if (res.code == 200) {
          this.list = res.data.list;
          this.total = res.data.count;
        }
      });
    },
    async gettag() {
      const res = await apis.gettag().then((res) => {
        this.listdata = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.body {
  width: 100%;
}
.title {
  margin-top: -10px;
  font-size: 14px;
}
.typename2 {
  margin-right: 20px;
  cursor: pointer;
  font-size: 13px;
}
.typename {
  //    font-weight: 600;
  :first-child {
    font-weight: 600;
  }
  :nth-child(2) {
    font-weight: 600;
  }
}
.fl {
  display: flex;
  justify-content: space-between;
  margin: 40px 40px;
  .tag {
    margin-left: 20px;
    // width: 100px;
    display: inline-block;
    cursor: pointer;
    line-height: 40px;
  }
  .type > div {
    margin-bottom: 10px;
  }
}
.box {
  width: 180px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 20px;
  p {
    margin-top: 10px;
    span {
      font-size: 12px;
    }
  }
  .img {
    width: 180px;
    height: 220px;
    img {
      width: 180px;
      height: 220px;
    }
  }
}
.container {
  width: 1200px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.search {
  border: 1px solid #ccc;
  height: 24px;
  background: #fff;
  .seainput {
    margin-left: 10px;
    border: none;
    outline-style: none;
  }
}
.headportrait {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
  margin-left: 5px;
}
.likes {
  float: right;
  margin-right: 10px;
}
.likeico {
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  margin-right: 10px;
}
.dyText {
  font-size: 14px;
  margin: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sometime {
  display: flex;
  line-height: 40px;
}
.block2 {
  margin-left: 20px;
  height: 40px;
}
.demonstration {
  line-height: 40px;
  cursor: pointer;
}
</style>